$copy: () !default;
$copy: map-merge(
  (
    bg: rgba(0, 0, 0, 0.6),
    color: rgb(241, 239, 239),
    hover-bg: rgba(0, 0, 0, 0.2),
    hover-color: #eee,
  ),
  $copy
);

$bg: map-get($copy, bg);
$color: map-get($copy, color);
$hover-bg: map-get($copy, hover-bg);
$hover-color: map-get($copy, hover-color);

#cnblogs_post_body pre {
  position: relative;
}

.cnblogs_code,
.cnblogs_Highlighter {
  position: relative;
  .copy-btns {
    z-index: 1;
  }
}

pre:hover,
.cnblogs_code:hover,
.cnblogs_Highlighter:hover {
  .copy-btns {
    visibility: visible;
  }
}

.copy-btns {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  visibility: hidden;
  color: $color !important;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.copy-btns {
  background-color: $bg !important;
  &:active {
    background: $hover-bg;
    color: $hover-color;
  }
}

@media screen and (max-width: 768px) {
  .copy-btns {
    display: none;
  }
}
